<template>
  <div class="link-card">
   <slot></slot>
    <div class="arrow-box relative z-20">
      <el-image class="arrow " :src="arrow" ></el-image>
    </div>
  </div>
</template>

<script>
import arrow from '@/assets/icons/arrow_right.png'

export default {
    // :style="{
    //   width: eleWidth,
    //   height: eleHeight
    // }"

  name: "LinkCard",
  props:{
    eleWidth: {
      type: String,
      default: '271px'
    },
    eleHeight: {
      type: String,
      default: '106px'
    }
  },

  data() {
    return {
      arrow
    }
  },
};
</script>

<style scoped lang="scss">
.link-card {
  // width: 271px;
  // height: 106px;
  @apply relative cursor-pointer;

  .main{
    @apply w-full h-full;
  }
  .arrow-box {
    @apply absolute right-8 top-1/2 transform -translate-y-1/2 flex justify-center items-center ;

    .arrow {
      @apply w-8 h-8 rounded-full text-center text-2xl ;

      &::after {
        content: '';
        @apply w-8 h-8  bg-white
      }
    }
  }
}
</style>